////////////////////////////////////////////////////////////////////////////
//
// Copyright 2018 Realm Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////

@import "~realm-studio-styles/variables";

.LeftSidebar {
  display: flex;
  flex-direction: column;
  padding: $spacer / 2;
  padding-bottom: 0;

  &__Header {
    align-items: center;
    border-bottom: 1px solid $dove;
    color: $elephant;
    display: flex;
    flex-basis: 2.5rem;
    flex-shrink: 0;
    font-size: .9rem;
    font-weight: bold;
    justify-content: space-between;
    margin-bottom: $spacer / 2;
    padding-bottom: $spacer / 2;
    padding-left: $spacer;
    text-transform: uppercase;
  }

  &__Classes {
    flex-grow: 1;
    margin: 0 (-$spacer / 2);
    overflow-x: hidden;
    overflow-y: auto;
  }

  &__ClassList {
    padding: 0;

    &--empty {
      display: flex;
      height: 100%;
      justify-content: flex-start;

      &::before {
        color: $elephant;
        content: "This Realm has no classes defined";
        padding: $spacer;
        text-align: center;
      }
    }
  }

  &__Class {
    flex-direction: column;
    list-style: none;

    &__Name {
      flex-shrink: 1;
      overflow: hidden;
      padding-right: $spacer / 4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &__Info {
      align-items: center;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      padding: .75 * $spacer;
      padding-left: 1.5 * $spacer;
      position: relative;

      &:hover,
      &:focus {
        background: $secondary;
      }

      &--selected {
        background: $secondary;
      }

      &--highlighted {
        cursor: inherit;

        &::before {
          background: $primary;
          border-radius: 2px;
          bottom: 5px;
          content: "";
          left: $spacer / 2;
          position: absolute;
          top: 5px;
          width: 4px;
        }
      }
    }
  }

  &__List {
    background: $secondary;
    // box-shadow: inset 0 0 .4rem $realm-browser-list-box-shadow-color;
    padding: .75 * $spacer;
    padding-left: 1.5 * $spacer;
    padding-top: 0;
    position: relative;

    &__Name {
      align-items: center;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &__Text {
        font-size: .8rem;
        margin-right: $spacer / 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &__Parent {
      font-size: .8rem;
    }

    &__ParentObject {
      color: $primary;
      cursor: pointer;
      overflow: hidden;
      text-decoration: underline;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &::before {
      background: $primary;
      border-radius: 2px;
      bottom: 5px;
      content: "";
      left: $spacer / 2;
      position: absolute;
      top: 0;
      width: 4px;
    }
  }

  &__HiddenClassesHint,
  &__ReadOnlyHint {
    color: $elephant;
    font-size: .75rem;
    margin: $spacer / 2;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
